<template>
  <div class="mg-l-40 mg-t-20">
    <div style="font-size: 14px; font-weight: bold;">使用expandSlot插槽实现展示字段</div>
    <br />
    <e-table :columns="columns" :data="data">
      <template #expandSlot="{ row }">
        <div class="my-expand">
          <div class="my-expand-content" v-for="(item, index) in row.childrenData" :key="index">
            <span class="my-expand-content-label">{{ item.key }}</span>
            <span class="my-expand-content-value">{{ item.value }}</span>
          </div>
        </div>
      </template>
      <template #status="{ row }">
        <span>
          <e-tag size="large" :color="row.status" dark>{{ row.statusLabel }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <div class="btn" @click="print(index)">按钮</div>
      </template>
    </e-table>
  </div>
</template>

<script setup>
const columns = [
  {
    type: 'expand',
    width: 50,
  },
  {
    title: '实例名称',
    key: 'name',
    resizable: true
  },
  {
    title: '状态',
    slot: 'status',
    resizable: true
  },
  {
    title: 'IP',
    key: 'ip',
    resizable: true
  },
  {
    title: '时间',
    key: 'time',
    resizable: true
  },
  {
    title: '地域',
    key: 'address',
    resizable: true
  },
  {
    title: '操作',
    slot: 'action',
    resizable: true
  },
]
const data = [
  {
    name: 'CPC-RP-TJ-01',
    status: 'success',
    statusLabel: '成功',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '上海',
    childrenData: [
      { key: '云主机编号：', value: '10a674ca-5131-4913-8e98-17ae95134301' },
      { key: 'CPU：', value: '2核' },
      { key: '云主机名称：', value: 'ins-qrd74de0' },
      { key: '内存：', value: '40G' },
      { key: '云主机镜像：', value: 'CentOS 6.5 64bit' },
      { key: '系统盘：', value: '80G' }
    ]
  },
  {
    name: 'CPC-RP-TJ-02',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '苏州',
    childrenData: [
      { key: '云主机编号：', value: '10a674ca-5131-4913-8e98-17ae95134302' },
      { key: 'CPU：', value: '2核' },
      { key: '云主机名称：', value: 'CPC-RP-TJ-02' },
      { key: '内存：', value: '40G' },
      { key: '云主机镜像：', value: 'CentOS 6.5 64bit' },
      { key: '系统盘：', value: '80G' }
    ]
  },
  {
    name: 'CPC-RP-TJ-03',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '广州',
    childrenData: [
      { key: '云主机编号：', value: '10a674ca-5131-4913-8e98-17ae95134303' },
      { key: 'CPU：', value: '2核' },
      { key: '云主机名称：', value: 'CPC-RP-TJ-03' },
      { key: '内存：', value: '40G' },
      { key: '云主机镜像：', value: 'CentOS 6.5 64bit' },
      { key: '系统盘：', value: '80G' }
    ]
  },
  {
    name: 'CPC-RP-TJ-04',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.21',
    time: '2017-10-20',
    address: '苏州',
    childrenData: [
      { key: '云主机编号：', value: '10a674ca-5131-4913-8e98-17ae95134304' },
      { key: 'CPU：', value: '2核' },
      { key: '云主机名称：', value: 'CPC-RP-TJ-04' },
      { key: '内存：', value: '40G' },
      { key: '云主机镜像：', value: 'CentOS 6.5 64bit' },
      { key: '系统盘：', value: '80G' }
    ]
  },
  {
    name: 'CPC-RP-TJ-05',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.22',
    time: '2017-10-20',
    address: '广州',
    childrenData: [
      { key: '云主机编号：', value: '10a674ca-5131-4913-8e98-17ae95134305' },
      { key: 'CPU：', value: '2核' },
      { key: '云主机名称：', value: 'CPC-RP-TJ-05' },
      { key: '内存：', value: '40G' },
      { key: '云主机镜像：', value: 'CentOS 6.5 64bit' },
      { key: '系统盘：', value: '80G' }
    ]
  },
]

const print = (index) => {
  // 一些逻辑操作逻辑
  console.log('click:', index);
}
</script>

<style scoped>
.my-expand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.my-expand-content {
  width: 50%;
  display: flex;
  align-items: center;
  height: 36px;
}

.my-expand-content-label {
  width: 100px;
  text-align: right;
}

.btn {
  color: #1A6AFF;
  cursor: pointer;
}
</style>
